import React,{useState,useEffect} from 'react'
import style from "../Input/index.module.css"
import { SBook,SearchBook } from "../../components/api"
import axios from 'axios'
import { SearchOutline } from 'antd-mobile-icons'
import { Input } from "antd-mobile"
const { div, icon, sou, span, input,ul } = style
export default function Inputa() {
    const [Book, setBook] = useState([])
    const [value, setValue] = useState<any>('')
    const [look, setLook] = useState([])
    
    const BookList = async() => {
        let res = await SBook()
        console.log(res,"zx");
        setBook(res.data)
   }
    useEffect(()=> {
        BookList()
   },[])
    const add=() => {
        window.history.go(-1);
    }

    const search = async (value:any) => {
        let res = await SearchBook(value)
        setLook(res.data) 
    }
    
  return (
      <div>
          <div className={div}>
              <SearchOutline className={icon}></SearchOutline>
            
              <Input
                  className={input}
                  placeholder='请输入内容'
                  value={value}
                  onChange={val => {
                      setValue(val)
                  }}
                  onEnterPress={() => { search(value) }}
              />
              <h5 onClick={add}>取消</h5>
          </div>

          <div>
              {
                  look.map((ite: any) =>
                      <ul className={ul}>
                            <img src={ite.cover}></img>
                      <li>
                          { ite.name }
                    </li>
                      </ul>
                      
                    )  
              }
          </div>
          
    </div>
  )
}
